<template>
  <div class="banner-management">
    <!-- 顶部统计卡片 -->
    <div class="stats-cards">
      <div class="stat-card">
        <div class="stat-icon banner">
          <i class="el-icon-picture"></i>
        </div>
        <div class="stat-info">
          <div class="stat-number">{{ stats.totalCount || 0 }}</div>
          <div class="stat-label">轮播图总数</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon active">
          <i class="el-icon-check"></i>
        </div>
        <div class="stat-info">
          <div class="stat-number">{{ stats.activeCount || 0 }}</div>
          <div class="stat-label">已启用</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon inactive">
          <i class="el-icon-close"></i>
        </div>
        <div class="stat-info">
          <div class="stat-number">{{ stats.inactiveCount || 0 }}</div>
          <div class="stat-label">已禁用</div>
        </div>
      </div>
      <div class="stat-card">
        <div class="stat-icon views">
          <i class="el-icon-view"></i>
        </div>
        <div class="stat-info">
          <div class="stat-number">{{ stats.totalClicks || 0 }}</div>
          <div class="stat-label">总点击量</div>
        </div>
      </div>
    </div>

    <!-- 搜索和操作栏 -->
    <div class="toolbar">
      <div class="search-section">
        <el-input
          v-model="searchForm.title"
          placeholder="搜索轮播图标题"
          prefix-icon="el-icon-search"
          clearable
          @keyup.enter="handleSearch"
        />
        <el-select v-model="searchForm.linkType" placeholder="链接类型" clearable>
          <el-option label="无链接" :value="1" />
          <el-option label="内部链接" :value="2" />
          <el-option label="外部链接" :value="3" />
        </el-select>
        <el-select v-model="searchForm.status" placeholder="状态" clearable>
          <el-option label="启用" :value="1" />
          <el-option label="禁用" :value="0" />
        </el-select>
        <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
      </div>
      <div class="action-section">
        <el-button type="primary" icon="el-icon-plus" @click="handleCreate">新增轮播图</el-button>
        <el-button
          type="danger"
          icon="el-icon-delete"
          :disabled="selectedItems.length === 0"
          @click="handleBatchDelete"
        >
          批量删除
        </el-button>
      </div>
    </div>

    <!-- 轮播图列表 -->
    <div class="table-container">
      <el-table
        v-loading="loading"
        :data="bannerList"
        @selection-change="handleSelectionChange"
        stripe
        border
      >
        <el-table-column type="selection" width="50" align="center" />
        <el-table-column prop="id" label="ID" width="80" align="center" />
        <el-table-column label="轮播图" width="120" align="center">
          <template #default="{ row }">
            <el-image
              :src="getImageUrl(row.imageUrl)"
              :preview-src-list="[getImageUrl(row.imageUrl)]"
              fit="cover"
              class="banner-image"
              @error="handleImageError"
            />
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题" min-width="200" show-overflow-tooltip />
        <el-table-column prop="description" label="描述" min-width="200" show-overflow-tooltip />
        <el-table-column prop="linkType" label="链接类型" width="100" align="center">
          <template #default="{ row }">
            <el-tag :type="getLinkTypeTagType(row.linkType)">{{ getLinkTypeLabel(row.linkType) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="sortOrder" label="排序" width="80" align="center">
          <template #default="{ row }">
            <el-input-number
              v-model="row.sortOrder"
              :min="0"
              :max="999"
              size="small"
              @change="handleSortChange(row)"
            />
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100" align="center">
          <template #default="{ row }">
            <el-switch
              v-model="row.status"
              :active-value="1"
              :inactive-value="0"
              @change="handleStatusChange(row)"
            />
          </template>
        </el-table-column>
        <el-table-column prop="startTime" label="开始时间" width="160" align="center">
          <template #default="{ row }">
            {{ row.startTime || '-' }}
          </template>
        </el-table-column>
        <el-table-column prop="endTime" label="结束时间" width="160" align="center">
          <template #default="{ row }">
            {{ row.endTime || '-' }}
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="160" align="center" />
        <el-table-column label="操作" width="200" align="center" fixed="right">
          <template #default="{ row }">
            <div class="action-buttons">
              <el-button size="small" type="primary" @click="handleView(row)">查看</el-button>
              <el-button size="small" type="warning" @click="handleEdit(row)">编辑</el-button>
              <el-button size="small" type="danger" @click="handleDelete(row)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div class="pagination-wrapper">
      <div class="pagination-info">
        共 {{ pagination.total }} 条数据
      </div>
      <el-pagination
        v-model:current-page="pagination.page"
        v-model:page-size="pagination.size"
        :total="pagination.total"
        :page-sizes="[10, 20, 50]"
        :pager-count="5"
        layout="sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 新增/编辑轮播图对话框 -->
    <el-dialog
      :title="dialogTitle"
      v-model="dialogVisible"
      width="800px"
      :close-on-click-modal="false"
      @close="handleDialogClose"
    >
      <el-form
        ref="bannerFormRef"
        :model="bannerForm"
        :rules="bannerRules"
        label-width="100px"
      >
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="轮播图片" prop="imageUrl" required>
              <div class="upload-container">
                <el-upload
                  class="banner-uploader"
                  action="#"
                  :http-request="handleImageUpload"
                  :before-upload="beforeImageUpload"
                  :show-file-list="false"
                >
                  <el-image
                    v-if="bannerForm.imageUrl"
                    :src="getImageUrl(bannerForm.imageUrl)"
                    class="uploaded-image"
                    fit="cover"
                  />
                  <el-icon v-else class="banner-uploader-icon"><Plus /></el-icon>
                </el-upload>
                <div class="upload-tip">
                  建议尺寸：1200x400px，支持JPG、PNG格式，文件大小不超过2MB
                </div>
              </div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="标题" prop="title">
              <el-input v-model="bannerForm.title" placeholder="请输入轮播图标题" maxlength="200" show-word-limit />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="排序" prop="sortOrder">
              <el-input-number v-model="bannerForm.sortOrder" :min="0" :max="999" style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="描述" prop="description">
              <el-input
                v-model="bannerForm.description"
                type="textarea"
                :rows="3"
                placeholder="请输入轮播图描述"
                maxlength="500"
                show-word-limit
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="链接类型" prop="linkType">
              <el-select v-model="bannerForm.linkType" style="width: 100%" @change="handleLinkTypeChange">
                <el-option label="无链接" :value="1" />
                <el-option label="内部链接" :value="2" />
                <el-option label="外部链接" :value="3" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态" prop="status">
              <el-radio-group v-model="bannerForm.status">
                <el-radio :label="1">启用</el-radio>
                <el-radio :label="0">禁用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 内部链接配置 -->
        <template v-if="bannerForm.linkType === 2">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="目标类型" prop="targetType">
                <el-select v-model="bannerForm.targetType" style="width: 100%" @change="handleTargetTypeChange">
                  <el-option label="剪纸文化" value="culture" />
                  <el-option label="教程学习" value="tutorial" />
                  <el-option label="活动资讯" value="news" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="目标ID" prop="targetId">
                <el-input-number v-model="bannerForm.targetId" :min="1" style="width: 100%" />
              </el-form-item>
            </el-col>
          </el-row>
        </template>

        <!-- 外部链接配置 -->
        <template v-if="bannerForm.linkType === 3">
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="链接地址" prop="linkUrl">
                <el-input v-model="bannerForm.linkUrl" placeholder="请输入完整的URL地址，如：https://example.com" />
              </el-form-item>
            </el-col>
          </el-row>
        </template>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="开始时间">
              <el-date-picker
                v-model="bannerForm.startTime"
                type="datetime"
                placeholder="选择开始时间"
                style="width: 100%"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束时间">
              <el-date-picker
                v-model="bannerForm.endTime"
                type="datetime"
                placeholder="选择结束时间"
                style="width: 100%"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit" :loading="submitLoading">
            {{ isEdit ? '更新' : '创建' }}
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 查看轮播图详情对话框 -->
    <el-dialog
      title="轮播图详情"
      v-model="viewDialogVisible"
      width="700px"
    >
      <div v-if="viewBanner" class="banner-detail">
        <div class="detail-row">
          <label>轮播图：</label>
          <el-image
            :src="getImageUrl(viewBanner.imageUrl)"
            fit="cover"
            class="detail-image"
          />
        </div>
        <div class="detail-row">
          <label>标题：</label>
          <span>{{ viewBanner.title }}</span>
        </div>
        <div class="detail-row">
          <label>描述：</label>
          <span>{{ viewBanner.description || '-' }}</span>
        </div>
        <div class="detail-row">
          <label>链接类型：</label>
          <el-tag :type="getLinkTypeTagType(viewBanner.linkType)">{{ getLinkTypeLabel(viewBanner.linkType) }}</el-tag>
        </div>
        <div class="detail-row" v-if="viewBanner.linkType === 2">
          <label>目标类型：</label>
          <span>{{ viewBanner.targetType || '-' }}</span>
        </div>
        <div class="detail-row" v-if="viewBanner.linkType === 2">
          <label>目标ID：</label>
          <span>{{ viewBanner.targetId || '-' }}</span>
        </div>
        <div class="detail-row" v-if="viewBanner.linkType === 3">
          <label>链接地址：</label>
          <el-link :href="viewBanner.linkUrl" target="_blank">{{ viewBanner.linkUrl }}</el-link>
        </div>
        <div class="detail-row">
          <label>排序：</label>
          <span>{{ viewBanner.sortOrder }}</span>
        </div>
        <div class="detail-row">
          <label>状态：</label>
          <el-tag :type="viewBanner.status === 1 ? 'success' : 'danger'">
            {{ viewBanner.status === 1 ? '启用' : '禁用' }}
          </el-tag>
        </div>
        <div class="detail-row">
          <label>开始时间：</label>
          <span>{{ viewBanner.startTime || '-' }}</span>
        </div>
        <div class="detail-row">
          <label>结束时间：</label>
          <span>{{ viewBanner.endTime || '-' }}</span>
        </div>
        <div class="detail-row">
          <label>创建时间：</label>
          <span>{{ viewBanner.createTime }}</span>
        </div>
        <div class="detail-row">
          <label>更新时间：</label>
          <span>{{ viewBanner.updateTime }}</span>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { 
  getBannerList, 
  getBannerDetail, 
  createBanner, 
  updateBanner, 
  deleteBanner, 
  batchDeleteBanners,
  updateBannerStatus,
  updateBannerSort,
  getBannerStats
} from '@/api/banner'
import { uploadImage } from '@/api/upload'
import { getImageUrl, handleImageError } from '@/utils/imageUtils'

export default {
  name: 'BannerManagement',
  components: {
    Plus
  },
  setup() {
    // 响应式数据
    const loading = ref(false)
    const submitLoading = ref(false)
    const bannerList = ref([])
    const selectedItems = ref([])
    const dialogVisible = ref(false)
    const viewDialogVisible = ref(false)
    const isEdit = ref(false)
    const viewBanner = ref(null)
    const bannerFormRef = ref(null)

    // 统计数据
    const stats = reactive({
      totalCount: 0,
      activeCount: 0,
      inactiveCount: 0,
      totalClicks: 0
    })

    // 搜索表单
    const searchForm = reactive({
      title: '',
      linkType: null,
      status: null
    })

    // 分页信息
    const pagination = reactive({
      page: 1,
      size: 10,
      total: 0
    })

    // 轮播图表单
    const bannerForm = reactive({
      id: null,
      title: '',
      description: '',
      imageUrl: '',
      linkType: 1,
      linkUrl: '',
      targetType: '',
      targetId: null,
      sortOrder: 0,
      status: 1,
      startTime: '',
      endTime: ''
    })

    // 表单验证规则
    const bannerRules = {
      title: [
        { required: true, message: '请输入轮播图标题', trigger: 'blur' },
        { min: 1, max: 200, message: '标题长度在1到200个字符', trigger: 'blur' }
      ],
      imageUrl: [
        { required: true, message: '请上传轮播图片', trigger: 'blur' }
      ],
      linkType: [
        { required: true, message: '请选择链接类型', trigger: 'change' }
      ],
      linkUrl: [
        { 
          validator: (rule, value, callback) => {
            if (bannerForm.linkType === 3 && !value) {
              callback(new Error('请输入链接地址'))
            } else if (bannerForm.linkType === 3 && value && !isValidUrl(value)) {
              callback(new Error('请输入有效的URL地址'))
            } else {
              callback()
            }
          },
          trigger: 'blur'
        }
      ],
      targetType: [
        {
          validator: (rule, value, callback) => {
            if (bannerForm.linkType === 2 && !value) {
              callback(new Error('请选择目标类型'))
            } else {
              callback()
            }
          },
          trigger: 'change'
        }
      ],
      targetId: [
        {
          validator: (rule, value, callback) => {
            if (bannerForm.linkType === 2 && !value) {
              callback(new Error('请输入目标ID'))
            } else {
              callback()
            }
          },
          trigger: 'blur'
        }
      ],
      sortOrder: [
        { required: true, message: '请输入排序号', trigger: 'blur' },
        { type: 'number', min: 0, max: 999, message: '排序号在0-999之间', trigger: 'blur' }
      ],
      status: [
        { required: true, message: '请选择状态', trigger: 'change' }
      ]
    }

    // 计算属性
    const dialogTitle = ref('')

    // 方法
    const loadBannerList = async () => {
      try {
        loading.value = true
        const params = {
          page: pagination.page,
          size: pagination.size,
          ...searchForm
        }
        
        const response = await getBannerList(params)
        if (response.code === 200) {
          bannerList.value = response.data.list || []
          pagination.total = response.data.total || 0
        }
      } catch (error) {
        console.error('获取轮播图列表失败:', error)
        ElMessage.error('获取轮播图列表失败')
      } finally {
        loading.value = false
      }
    }

    const loadStats = async () => {
      try {
        const response = await getBannerStats()
        if (response.code === 200) {
          Object.assign(stats, response.data)
        }
      } catch (error) {
        console.error('获取统计信息失败:', error)
      }
    }

    const handleSearch = () => {
      pagination.page = 1
      loadBannerList()
    }

    const handleReset = () => {
      Object.assign(searchForm, {
        title: '',
        linkType: null,
        status: null
      })
      pagination.page = 1
      loadBannerList()
    }

    const handleSelectionChange = (selection) => {
      selectedItems.value = selection
    }

    const handleSizeChange = (size) => {
      pagination.size = size
      pagination.page = 1
      loadBannerList()
    }

    const handleCurrentChange = (page) => {
      pagination.page = page
      loadBannerList()
    }

    const handleCreate = () => {
      isEdit.value = false
      dialogTitle.value = '新增轮播图'
      resetForm()
      dialogVisible.value = true
    }

    const handleEdit = async (row) => {
      try {
        isEdit.value = true
        dialogTitle.value = '编辑轮播图'
        
        const response = await getBannerDetail(row.id)
        if (response.code === 200) {
          Object.assign(bannerForm, response.data)
          dialogVisible.value = true
        }
      } catch (error) {
        console.error('获取轮播图详情失败:', error)
        ElMessage.error('获取轮播图详情失败')
      }
    }

    const handleView = async (row) => {
      try {
        const response = await getBannerDetail(row.id)
        if (response.code === 200) {
          viewBanner.value = response.data
          viewDialogVisible.value = true
        }
      } catch (error) {
        console.error('获取轮播图详情失败:', error)
        ElMessage.error('获取轮播图详情失败')
      }
    }

    const handleDelete = (row) => {
      ElMessageBox.confirm(
        `确定要删除轮播图"${row.title}"吗？`,
        '确认删除',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then(async () => {
        try {
          const response = await deleteBanner(row.id)
          if (response.code === 200) {
            ElMessage.success('删除成功')
            loadBannerList()
            loadStats()
          }
        } catch (error) {
          console.error('删除失败:', error)
          ElMessage.error('删除失败')
        }
      })
    }

    const handleBatchDelete = () => {
      if (selectedItems.value.length === 0) {
        ElMessage.warning('请选择要删除的轮播图')
        return
      }

      ElMessageBox.confirm(
        `确定要删除选中的 ${selectedItems.value.length} 个轮播图吗？`,
        '确认删除',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then(async () => {
        try {
          const ids = selectedItems.value.map(item => item.id)
          const response = await batchDeleteBanners(ids)
          if (response.code === 200) {
            ElMessage.success('批量删除成功')
            selectedItems.value = []
            loadBannerList()
            loadStats()
          }
        } catch (error) {
          console.error('批量删除失败:', error)
          ElMessage.error('批量删除失败')
        }
      })
    }

    const handleStatusChange = async (row) => {
      try {
        const response = await updateBannerStatus(row.id, row.status)
        if (response.code === 200) {
          ElMessage.success('状态更新成功')
          loadStats()
        }
      } catch (error) {
        console.error('更新状态失败:', error)
        ElMessage.error('更新状态失败')
        // 恢复原状态
        row.status = row.status === 1 ? 0 : 1
      }
    }

    const handleSortChange = async (row) => {
      try {
        const response = await updateBannerSort(row.id, row.sortOrder)
        if (response.code === 200) {
          ElMessage.success('排序更新成功')
        }
      } catch (error) {
        console.error('更新排序失败:', error)
        ElMessage.error('更新排序失败')
      }
    }

    const handleSubmit = async () => {
      if (!bannerFormRef.value) return

      try {
        await bannerFormRef.value.validate()
        submitLoading.value = true

        const response = isEdit.value
          ? await updateBanner(bannerForm.id, bannerForm)
          : await createBanner(bannerForm)

        if (response.code === 200) {
          ElMessage.success(`${isEdit.value ? '更新' : '创建'}成功`)
          dialogVisible.value = false
          loadBannerList()
          loadStats()
        }
      } catch (error) {
        if (error !== 'cancel') {
          console.error(`${isEdit.value ? '更新' : '创建'}失败:`, error)
          ElMessage.error(`${isEdit.value ? '更新' : '创建'}失败`)
        }
      } finally {
        submitLoading.value = false
      }
    }

    const handleDialogClose = () => {
      bannerFormRef.value?.resetFields()
      resetForm()
    }

    const resetForm = () => {
      Object.assign(bannerForm, {
        id: null,
        title: '',
        description: '',
        imageUrl: '',
        linkType: 1,
        linkUrl: '',
        targetType: '',
        targetId: null,
        sortOrder: 0,
        status: 1,
        startTime: '',
        endTime: ''
      })
    }

    const handleLinkTypeChange = (linkType) => {
      // 清除相关字段
      if (linkType !== 2) {
        bannerForm.targetType = ''
        bannerForm.targetId = null
      }
      if (linkType !== 3) {
        bannerForm.linkUrl = ''
      }
    }

    const handleTargetTypeChange = () => {
      bannerForm.targetId = null
    }

    const handleImageUpload = async ({ file }) => {
      try {
        const response = await uploadImage(file)
        if (response.code === 200) {
          bannerForm.imageUrl = response.data.url
          ElMessage.success('图片上传成功')
        } else {
          ElMessage.error(response.message || '上传失败')
        }
      } catch (error) {
        console.error('上传失败:', error)
        ElMessage.error('上传失败')
      }
    }

    const beforeImageUpload = (file) => {
      const isValidType = ['image/jpeg', 'image/png'].includes(file.type)
      const isValidSize = file.size / 1024 / 1024 < 2

      if (!isValidType) {
        ElMessage.error('只能上传 JPG、PNG 格式的图片!')
        return false
      }
      if (!isValidSize) {
        ElMessage.error('图片大小不能超过 2MB!')
        return false
      }
      return true
    }


    const getLinkTypeLabel = (linkType) => {
      const labels = {
        1: '无链接',
        2: '内部链接',
        3: '外部链接'
      }
      return labels[linkType] || '未知'
    }

    const getLinkTypeTagType = (linkType) => {
      const types = {
        1: 'info',
        2: 'success',
        3: 'warning'
      }
      return types[linkType] || 'info'
    }

    const isValidUrl = (url) => {
      try {
        new URL(url)
        return true
      } catch {
        return false
      }
    }

    // 生命周期
    onMounted(() => {
      loadBannerList()
      loadStats()
    })

    return {
      // 数据
      loading,
      submitLoading,
      bannerList,
      selectedItems,
      dialogVisible,
      viewDialogVisible,
      isEdit,
      viewBanner,
      bannerFormRef,
      stats,
      searchForm,
      pagination,
      bannerForm,
      bannerRules,
      dialogTitle,

      // 方法
      loadBannerList,
      loadStats,
      handleSearch,
      handleReset,
      handleSelectionChange,
      handleSizeChange,
      handleCurrentChange,
      handleCreate,
      handleEdit,
      handleView,
      handleDelete,
      handleBatchDelete,
      handleStatusChange,
      handleSortChange,
      handleSubmit,
      handleDialogClose,
      resetForm,
      handleLinkTypeChange,
      handleTargetTypeChange,
      handleImageUpload,
      beforeImageUpload,
      handleImageError,
      getImageUrl,
      getLinkTypeLabel,
      getLinkTypeTagType,
      isValidUrl
    }
  }
}
</script>

<style scoped>
.banner-management {
  padding: 0;
}

/* 统计卡片样式 */
.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.stat-card {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
  border-left: 4px solid transparent;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.stat-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
  margin-right: 16px;
  position: relative;
  overflow: hidden;
}

.stat-icon.banner {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-left-color: #667eea;
}

.stat-icon.active {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  border-left-color: #4facfe;
}

.stat-icon.inactive {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  border-left-color: #f093fb;
}

.stat-icon.views {
  background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
  color: #8B0000;
  border-left-color: #fcb69f;
}

.stat-info {
  flex: 1;
}

.stat-number {
  font-size: 32px;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 4px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.stat-label {
  font-size: 14px;
  color: #7f8c8d;
  font-weight: 500;
}

/* 工具栏样式 */
.toolbar {
  background: white;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.search-section {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.search-section .el-input {
  width: 200px;
}

.search-section .el-select {
  width: 150px;
}

.action-section {
  display: flex;
  gap: 12px;
}

/* 表格容器样式 */
.table-container {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  margin-bottom: 24px;
}

.banner-image {
  width: 80px;
  height: 45px;
  border-radius: 4px;
  object-fit: cover;
}

.action-buttons {
  display: flex;
  gap: 4px;
  justify-content: center;
}

/* 分页样式 */
.pagination-wrapper {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pagination-info {
  color: #666;
  font-size: 14px;
}

/* 上传组件样式 */
.upload-container {
  text-align: center;
}

.banner-uploader {
  border: 2px dashed #d9d9d9;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s;
  width: 300px;
  height: 120px;
  display: inline-block;
}

.banner-uploader:hover {
  border-color: #8B0000;
}

.banner-uploader-icon {
  font-size: 28px;
  color: #8c8c8c;
  width: 300px;
  height: 120px;
  line-height: 120px;
  text-align: center;
}

.uploaded-image {
  width: 300px;
  height: 120px;
  display: block;
}

.upload-tip {
  margin-top: 8px;
  color: #666;
  font-size: 12px;
}

/* 详情对话框样式 */
.banner-detail {
  padding: 20px 0;
}

.detail-row {
  display: flex;
  align-items: flex-start;
  margin-bottom: 16px;
  padding: 8px 0;
  border-bottom: 1px solid #f5f5f5;
}

.detail-row:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.detail-row label {
  width: 100px;
  color: #666;
  font-weight: 500;
  flex-shrink: 0;
}

.detail-row span, .detail-row .el-tag, .detail-row .el-link {
  flex: 1;
}

.detail-image {
  width: 200px;
  height: 80px;
  border-radius: 4px;
  object-fit: cover;
}

/* 对话框底部样式 */
.dialog-footer {
  text-align: right;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .stats-cards {
    grid-template-columns: 1fr;
  }
  
  .toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  
  .search-section,
  .action-section {
    justify-content: center;
  }
  
  .search-section .el-input,
  .search-section .el-select {
    width: 100%;
    max-width: 200px;
  }
  
  .action-buttons {
    flex-direction: column;
    gap: 4px;
  }
  
  .pagination-wrapper {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
  
  .banner-uploader {
    width: 100%;
    max-width: 300px;
  }
  
  .uploaded-image {
    width: 100%;
    height: 120px;
  }
}
</style>
